<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="../../css/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" href="../../css/allBase.css">
    <link rel="stylesheet" href="../../css/dialog.css" />
    <link href="../../js/riqi/bootstrap.min.css" rel="stylesheet">
    <link href="../../js/riqi/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="all" href="../../js/riqi/daterangepicker-bs3.css" />
    <style>
        #nrdvMsgBox{
			z-index: 99999;
		}
		#nrShowBolightBox{
			z-index: 9999;
		}
	    .selectionL{
	    	float: none;
	    }
	    .zhiye{
	    	margin-left: 82px;
	    	background:lightgoldenrodyellow;
	    	border: 1px solid #ddd;
	    	padding-left: 20px;
	    	padding-top: 10px;
	    }
	    .yaoshi{
	    	display: none;
	    }
	    .yishi{
	    	display: none;
	    }
	    #main{
	    		float: left;
	     	width: 65%;
	    }
	    #main2{
	    	float: left;
	    	width: 30%;
	    	margin-left: 4%;
	    }
    </style>
    <![endif]-->
    <title>结果</title>
</head>
<body>
	<div class="classifiedBox">
	     <div class="classified-search">
             <form class="form-horizontal" style="margin-bottom: 5px;">
                 <fieldset>
                  <div class="control-group">
                    <div class="controls">
                    <p style="float: left;line-height: 34px;">日期范围：</p>
                     <div class="input-prepend input-group" style="float: left;width:150px ;">
                     
                     	<span class="add-on input-group-addon">
                     		<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                     	</span>
                     	<input type="text" readonly style="width: 200px" name="reservation" id="reservation" class="form-control" value="2017-7-21 - 2017-7-21" /> 
                   </div>
                     <p class="meici" style="float:left;color:red;line-height: 34px;">（每次最多选取60天）</p>
                    </div>
                  </div>
                 </fieldset>
              </form>
	        <div class="product-classification">
	            <div class="productR">
	                产品分类：
	            </div>
	            <div class="productL">
	            	<span id="ying" class="selected">新版考试宝典</span>
	                <span id="ALL">全部</span>
	                <span id="yishi">执业医师</span>
	                <span id="yaoshi">执业药师</span>
	                <span id="ZY_HS">执业护士</span>
	                <i>（*单选）</i>
	            </div>
	           <div class="yaoshi zhiye">
	         <!--  	  <span id="ALL" class="selected">全部</span>-->
                  <span id="ZY_ZYAO_YTMJ">执业药师（中药）</span> 
                  <span id="ZY_XY_YTMJ">执业药师（西药）</span>
                  <i>（*单选）</i>
	           </div>
	           <div class="yishi zhiye">
	           	  <!--<span id="ALL"  class="selected">全部</span>-->
                  <span id="ZY_LCZY_YTMJ">临床执业医师</span> 
                  <span id="ZY_LCSJJN">临床执业医师实践技能</span>
                  <span id="ZY_LCZL_YTMJ">临床执业助理医师</span>
                  <span id="ZY_LCZLSJJN">临床执业助理医师实践技能</span>
                  <span id="ZY_KQZY_YTMJ">口腔执业医师</span>
                  <span id="ZY_KQSJJN">口腔执业医师实践技能</span>
                  <span id="ZY_KQZL_YTMJ">口腔执业助理医师</span>
                  <span id="ZY_KQZLSJJN">口腔执业助理医师实践技能</span>
                  <span id="ZY_ZYZY_YTMJ">中医执业医师</span>
                  <span id="ZY_ZYSJJN">中医执业医师实践技能</span>
                  <span id="ZY_ZYZL_YTMJ">中医执业助理医师</span>
                  <span id="ZY_ZYZLSJJN">中医执业助理医师实践技能</span>
                  <span id="ZY_ZXYZY_YTMJ">中西医结合执业医师</span>
                  <span id="ZY_ZXYSJJN">中西医结合执业医师实践技能</span>
                  <span id="ZY_ZXYZL_YTMJ">中西医结合执业助理医师</span>
                  <span id="ZY_ZXYZLSJJN">中西医结合执业助理医师实践技能</span>
                  <span id="ZY_GWZY_YTMJ">公卫执业医师</span>
                  <span id="ZY_GWSJJN">公卫执业医师实践技能</span>
                  <span id="ZY_GW_ZL">公卫执业助理医师</span>
                  <span id="ZY_GWZLSJJN">公卫执业助理医师实践技能</span>
                  <span id="ZY_XCQKZL">乡村全科执业助理医师</span> 
                  <i>（*单选）</i>
	           </div>
	        </div>
	        <button id="btncx" onclick="" class="btn btn-success" type="submit">开始查询</button>
	        <!--<div class="refresh">
	            <img src="../../img/refresh.png" alt="">
	            <a class="tabReload" href="#">刷新当前</a>
	        </div>-->
	    </div>
    </div>
    <!--数据展示结果-->
    <img class="loadingimg" src="../../img/loading.gif" style="position: absolute; top: 0%; left: 0; right: 0; bottom: 0; margin: auto;display: none;" />
    
    <div class="panel-body" style="display: none;">
    	<div class="titleNum"></div>
    	<div class="title" style="width:100%">
    		<ul class="title1" >
    			<li class="list1">填写考生信息人数对比图</li>
    			<li id="main1" class="main">
    			</li>
    		</ul>
    		<ul class="title2" >
    			<li class="list1">填写考生信息人数趋势图</li>
    			
    			<li id="main" class="main">
    				
    			</li>
    			<li id="main2" class="main">
    				
    			</li>
    		</ul>
    	</div>
        
    </div>
    
    <script src="../../js/jquery/jQuery-2.2.0.min.js"></script>
   <!-- <script src="../../js/charts/Chart.js"></script>-->
    <script type="text/javascript" src="../../js/base/echarts.common.min.js"></script>
    <script type="text/javascript" src="../../js/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="../../js/base/ajax.js"></script>
    <script type="text/javascript" src="../../js/base/yingSoftPrg.js"></script>
    <script type="text/javascript" src="../../js/base/dialog.js"></script>
    <script type="text/javascript" src="../../js/riqi/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/riqi/moment.js"></script>
    <script type="text/javascript" src="../../js/riqi/daterangepicker.js"></script>

    <script type="text/javascript">
    	    var myDate = new Date();//添加日期
               	y=myDate.getFullYear(); 
               	m=myDate.getMonth()+1;
               	d=myDate.getDate()-1;
               	if(myDate.getDate()==1){
               		 d=myDate.getDate();
               	}
               	dqy=y+"-"+m+"-"+d;
               	$('#reservation').val(dqy+" - "+dqy)
               $(document).ready(function() {
                  $('#reservation').daterangepicker({
                        // startDate: moment().startOf('day'),  
                        //endDate: moment(),  
                        //minDate: '01/01/2012',    //最小时间  
                        maxDate : moment(), //最大时间   
                        dateLimit : {  
                            days : 60  
                        }, //起止时间的最大间隔  
                        showDropdowns : true,  
                        showWeekNumbers : false, //是否显示第几周  
                        timePicker : false, //是否显示小时和分钟  
                        timePickerIncrement : 60, //时间的增量，单位为分钟  
                        timePicker12Hour : false, //是否使用12小时制来显示时间  
                        ranges : {  
                            //'最近1小时': [moment().subtract('hours',1), moment()],  
                            '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
                            '最近7日': [moment().subtract('days', 6), moment()],
                            '最近30日': [moment().subtract('days', 29), moment()],  
                            '最近60日': [moment().subtract('days', 59), moment()]  
                        },  
                        opens : 'right', //日期选择框的弹出位置  
                        buttonClasses : [ 'btn btn-default' ],  
                        applyClass : 'btn-small btn-primary blue',  
                        cancelClass : 'btn-small',  
                        format : 'YYYY-MM-DD', //控件中from和to 显示的日期格式  
                        separator : ' - ',  
                        locale : {  
                            applyLabel : '确定',  
                            cancelLabel : '取消',  
                            fromLabel : '从',  
                            toLabel : '到',  
                            weekLabel: 'W',
                            customRangeLabel : '选择时间',  
                            daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],  
                            monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',  
                                    '七月', '八月', '九月', '十月', '十一月', '十二月' ]
//                          firstDay : 1  
                        }  
                    }, function(start, end, label) {//格式化日期显示框  
                        $('#reservation span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));  
                    }); 
					
               });
               $(document).on('click','.applyBtn',function(){//判断日期是否是在60天之内
               	     var val=$('#reservation').val().split(' - ');
                  	 var endTime=new Date(val[1]);
                  	 var startTime=new Date(val[0]);
                  	 var timestamp = Date.parse(new Date(val[0]));
                     timestamp = timestamp / 1000;
//                   console.log(timestamp)
                  if(timestamp>1503187200){
                  	if(endTime - startTime>5270400000){
                  		$('.daterangepicker').css('display','block')
                  		 G_Prg.alert('每次最多选取60天',function(){
		
	                    });
                  	}
                 }else{
                  		$('.daterangepicker').css('display','block')
                  		 G_Prg.alert('只能选择2017/8/21之后的时间哟！',function(){
		
	                    });
                }
               })
            var clients = [];
            var clientsName = [];
			var hTimes = ["0点","1点","2点","3点","4点","5点","6点","7点","8点","9点",
        				"10点","11点","12点","13点","14点","15点","16点","17点","18点","19点",
        				"20点","21点","22点","23点"
        				];
			var hwChart;
			var swChart;
			var times=[];//两个日期之间的区间
            this.init = function(){
                var option = {};
                var dd=new Date();
                var m=dd.getMonth()+1;
                var d1=dd.getDate();
                //var d2=dd.getDate();
                var days1=G_Prg.GetDay(dd.getFullYear(),m,d1);
                var days2=  dd.getFullYear()+'-'+m+'-'+d1;
                $('#logmin').val(days1);
                $('#logmax').val(days1);
                
                
                allclick();//点击事件

            }
            var selectArr={
                          "Arr1":[
                                {"appEname":"ZY_XY_YTMJ","name":"执业药师(西药)"},
                                {"appEname":"ZY_ZYAO_YTMJ","name":"执业药师(中药)"}
                          ],
                          "Arr2":[
                                {"appEname":"ZY_GW_ZL","name":"公卫执业助理医师"},
                                {"appEname":"ZY_GWZY_YTMJ","name":"公卫执业医师"},
                                {"appEname":"ZY_KQZL_YTMJ","name":"口腔执业助理医师"},
                                {"appEname":"ZY_KQZY_YTMJ","name":"口腔执业医师"},
                                {"appEname":"ZY_LCZL_YTMJ","name":"临床执业助理医师"},
                                {"appEname":"ZY_LCZY_YTMJ","name":"临床执业医师"},
                                {"appEname":"ZY_ZXYZL_YTMJ","name":"中西医结合执业助理医师"},
                                {"appEname":"ZY_ZXYZY_YTMJ","name":"中西医结合执业医师"},
                                {"appEname":"ZY_ZYZL_YTMJ","name":"中医执业助理医师"},
                                {"appEname":"ZY_ZYZY_YTMJ","name":"中医执业医师"}
                          ]           
            }
            /**************************************************
             * 功能：点击事件
             * 函数名：allclick（）
             * 传入参数：无
             * 创建人：刘淳昊 2017-03-13
             *************************************************/
            function allclick() {
                //刷新页面
                $('.refresh').on('click',function(){
                    window.location.reload();
                })
                //切换科目选项 (全选反选)
                $('.productL span').on('click',function(){
                   $('.productL span').removeClass('selected');
                   if($(this).attr('id') == 'yaoshi'){
                   	   $('.yaoshi').css('display','block');
                   	   $('.yishi').css('display','none');
                   }else if($(this).attr('id') == 'yishi'){
                   	   $('.yishi').css('display','block');
                   	   $('.yaoshi').css('display','none');
                   }else{
                   	   $('.yaoshi').css('display','none');
                   	   $('.yishi').css('display','none');
                   }
	               $(this).addClass('selected');
                })
                $('.yaoshi span').on('click',function(){
                	$('.yaoshi span').removeClass('selected');
                	$(this).addClass('selected');
                })
                $('.yishi span').on('click',function(){
                	$('.yishi span').removeClass('selected');
                	$(this).addClass('selected');
                })
                //切换情况选项
                $('.purchase-situation span').on('click',function(){    
                    $(this).addClass('selected').siblings().removeClass('selected');
                })
                //查询结果
                $('#btncx').on('click',function(){
                var val=$('#reservation').val().split(' - ');
                var startTime=new Date(val[0]);
                var endTime=new Date(val[1]);
                if(endTime-startTime<5270400000){
                    $('.loadingimg').show();
                	$('.panel-body').hide();
                	setTimeout(function(){
                		$('.panel-body').show();
	                    getLoginData();
//	                    getLoginCount();
	                    window.onresize = function () {
					        hwChart.resize();
					        swChart.resize();
					    }
                	},500)
                }else{
               		G_Prg.alert('每次最多选取60天',function(){
		
	                });
                }
                })
				
            }

            /**************************************************
             * 功能：数据绘图
             * 函数名：Canvas1（）
             * 传入参数：无
             * 创建人：刘淳昊 2017-03-30
             *************************************************/
            function Canvas1(jsonData,times,listData){
                var series =[];
                var xAxis =[];
                var btn=[]
                var lineData=[];
				function formatDate(date) {
				  var d = new Date(date),
				    month = '' + (d.getMonth() + 1),
				    day = '' + d.getDate(),
				    year = d.getFullYear();
				  if (month.length < 2) month = '0' + month;
//				  if (day.length < 2) day = '0' + day;
				  return [year, month, day].join('-');
				};
                var addsData=[];
                var aad=[];
//              console.log(jsonData)
                for(var i=0;i<times.length;i++){
                	for(var j=0;j<jsonData.length;j++){
		                if(jsonData[j]){
						       	var dqy=formatDate(jsonData[j].RQ);
						       	if(times[i]==dqy){
						       		aad.push(jsonData[j].num.toString())
						       		break;
						       	}
						       	if(jsonData.length==j+1){
						       		aad.push("0");
						       	}
						        
					
		                }
                	}
                	if(jsonData.length===0){
						 aad.push("0");
					}
  		
              } 
              addsData.push(aad)
                var StyleSin = function(){
                    return {
                        data:[],
                        axisLabel: {
							show: true,
							textStyle: {
								color: '#000',
								fontFamily: "microsoft yahei",
								fontSize: 12
							}
						}
                    }
                };
                var Item = function(){
                    return {
                        name:'',
                        type:'line',
                        itemStyle: {normal: {}},
                        label: {normal: {}},
                        data:[]
                    }
                };
				//x轴分为两种情况 （1.0-23小时  2.时间日期 xxxx-xx-xx）
                for(var i =0;i<addsData.length;i++){
                    if(times.length>=1){
                        var it = new Item();
                        var style = new StyleSin();
                        it.name = "人数";
                        it.type = 'line';
                        it.data = addsData[0];
                        style.data = times;
                        style.type = 'category';
                        style.boundaryGap = false;
                        style.name='(时间)';
                        series.push(it);// 将item放在series中
                        xAxis.push(style);
                    }
                }
                // 基于准备好的dom，初始化echarts实例
                 swChart = echarts.init(document.getElementById('main'));
				
                // 指定图表的配置项和数据
                option = {
                    title: {
                    	x:'20',
                        text: ''
                    },
                    tooltip:{
                        trigger: 'axis'
                    },
                    legend:{
                        data:btn
                    },
                     grid: {
				        left: '2%',
				        bottom: '0%',
				        containLabel: true
				    },
                    yAxis: {
                        type : 'value'
                    },
                    series: []
                };
                option.series = series;
          
                option.xAxis = [{  //修改上面的日期
             	   axisLabel:{show:true},
	               textStyle:{color:"#000",fontFamily:"microsoft yahei",fontSize:12},
	               boundaryGap:false,
	               name:"(时间)",
	               type:"category",
                   data:xAxis[0].data
              }];
                // 使用刚指定的配置项和数据显示图表。
                swChart.setOption(option);
            }
             
             
             /**************************************************
             * 功能：数据绘图(饼状图)
             * 函数名：Canvas2（）
             * 传入参数：无
             * 创建人：刘淳昊 2017-03-30
             *************************************************/
            function Canvas2(jsonData){
//          	console.log(jsonData);
            	var arr=[];
            	for(var i=0;i<jsonData.length;i++){
            		switch(i){
            			case 0:
						  arr.push(jsonData[7].count);
						  break;
						case 1:
						  arr.push(jsonData[3].count);
						  break;
						case 2:
						  arr.push(jsonData[6].count);
						  break;
						case 3:
						  arr.push(jsonData[2].count);
						  break;
						case 4:
						  arr.push(jsonData[5].count);
						  break;
						case 5:
						  arr.push(jsonData[1].count);
						  break;
						case 6:
						  arr.push(jsonData[4].count);
						  break;
						case 7:
						  arr.push(jsonData[0].count);
						  break;
            		}
            	}
//          	console.log(arr)
            	hwChart = echarts.init(document.getElementById('main1'));
				option = {
				    tooltip : {
				        trigger: 'axis'
				    },
				    legend: {
				        data:['人数']
				    },
				    toolbox: {
				        show : true,
//				        feature : {
//				            mark : {show: true},
//				            dataView : {show: true, readOnly: false},
//				            magicType: {show: true, type: ['line', 'bar']},
//				            restore : {show: true},
//				            saveAsImage : {show: true}
//				        }
				    },
				    calculable : true,
				    xAxis : [
				        {
				            type : 'value'
//				            boundaryGap : [0, 0.01]
				        }
				    ],
				    grid: { // 控制图的大小，调整下面这些值就可以，
			             x: 130,
			          
			         },
				    yAxis : [
				        {
				            type : 'category',
				            data : ['密训私教班填写人数','密训私教班购买人数','精英定制班填写人数','精英定制班购买人数','无忧协议班填写人数','无忧协议班购买人数','全部填写人数','全部购买人数']
				        }
				    ],
				    series : [
				        {
				            name:'人数',
				            type:'bar',
				            data:arr
				        }
				    ]
                };

				hwChart.setOption(option);
           }
        /**************************************************
         * 功能：数据绘图(饼状图)
         * 函数名：Canvas3（）
         * 传入参数：无
         * 创建人：刘淳昊 2017-03-30
         *************************************************/
        function Canvas3(jsonData,clientsName){
        	var jsonData2=[{
        		'name':'人数',
        		'value':jsonData
        	}]
        	// 基于准备好的dom，初始化echarts实例
            hwChart = echarts.init(document.getElementById('main2'));
        	var option1 = {
				title : {
				    text: '',
				    x:'center'
				},
				tooltip : {
				    trigger: 'item',
				    formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
				    orient : 'vertical',
				    x : 'right',
				    data:'人数'
				},
				toolbox: {
				    show : false,
				    feature : {
				        mark : {show: true},
				        dataView : {show: true, readOnly: false},
				        magicType : {
				            show: true, 
				            type: ['pie', 'funnel'],
				            option: {
				                funnel: {
				                    x: '10%',
				                    width: '50%',
				                    funnelAlign: 'left',
				                    max: 1548
				                }
				            }
				        },
				        restore : {show: true},
				        saveAsImage : {show: true}
				    }
				},
				calculable : false,
				series : [
				    {
				        name:'来源',
				        type:'pie',
				        radius : '60%',
				        center: ['45%', '50%'],
				        data:jsonData2,
				        itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 10,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
				    }
				    ]  
				};
        	//使用刚指定的配置项和数据显示图表。
            hwChart.setOption(option1);
        }
            /**************************************************
             * 功能：登录成功人数数据 /api/new/loginCount
             * 接口：https://tongji.ksbao.com:8003
             * 函数名：getLoginData（）
             * 传入参数：startDay    开始时间
             *         endDay      结束时间
             *         clients     所选单品
             *         userType    购买未购买[0未购买、1购买、2合计]
             * 创建人：刘淳昊 2017-03-20
             *************************************************/
            
            function getLoginData(){
                var val=$('#reservation').val().split(' - ');
                var startTime = val[0];
                var endTime = val[1];
                if($('.yaoshi').css('display') == 'block'){
                	var appEName=$('.yaoshi .selected').attr('id')
                }else if($('.yishi').css('display') == 'block'){
                	var appEName=$('.yishi .selected').attr('id')
                }else{
                	var appEName=$('.productL .selected').attr('id')
                }
//              console.log(appEName)
                getAll(startTime,endTime);
                var userType = $('.purchase-situation .selected').attr('id');
                var client = $('.productOne div p').attr('id');
                var dataType = $('.selectionL .selected').attr('name');
                var clientsData = JSON.stringify(clients);
                var clientsNameData = JSON.stringify(clientsName);
                var _url='/api/new/newauthColumn?startDay='+startTime+'&endDay='+endTime+'&appEName='+appEName;
                G_AjaxApi.get(_url,false,function(json){
                var jsonData = JSON.parse(json);
                    if(jsonData.status ==200){
                        if(jsonData.data == ''){
                            alert('数据为空');
                        }else{
                        	$('.titleNum').empty();
                            $('.loadingimg').hide();
                            var data=jsonData.data;
     						Canvas2(data);
                        }
                    }else{
                    	console.log(jsonData.status)
                    }
                })
                var _url2='/api/new/newauth?startDay='+startTime+'&endDay='+endTime+'&appEName='+appEName;
                 G_AjaxApi.get(_url2,false,function(json){
                var jsonData = JSON.parse(json);
                    if(jsonData.status ==200){
                        if(jsonData.data == ''){
                            alert('数据为空');
                        }else{
                        	$('.titleNum').empty();
                            $('.loadingimg').hide();
                            var data=jsonData.data.lineData;
                            var data2 = jsonData.data.pieData.data
     						Canvas1(data,times,clientsName);
     						Canvas3(data2,clientsName);
                        }
                    }else{
                    	console.log(jsonData.status)
                    }
                })
            }
            
            /**********************************************************
            * 功能：获取日期区间
            * ********************************************************/
            Date.prototype.format=function (){
			    var s='';
			    s+=this.getFullYear()+'-';          // 获取年份。
			    s+=(this.getMonth()+1)+"-";         // 获取月份。
			    s+= this.getDate();                 // 获取日。
			    return(s);                          // 返回日期。
			};
			function getAll(begin,end){
				times=[];
			    var ab = begin.split("-");
			    var ae = end.split("-");
			    var db = new Date();
			    db.setUTCFullYear(ab[0], ab[1]-1, ab[2]);
			    var de = new Date();
			    de.setUTCFullYear(ae[0], ae[1]-1, ae[2]);
			    var unixDb=db.getTime();
			    var unixDe=de.getTime();
			    for(var k=unixDb;k<=unixDe;){
				    times.push((new Date(parseInt(k))).format());
				    k=k+24*60*60*1000;
			    }
			}

            init();


    </script>
</body>
</html>